<template>
    <!--<div>-->
    <!--<div style="padding-bottom: 15px;margin-left: 102px;margin-right: 102px">-->
    <!--<span style="padding-left: 130px">名称</span>-->
    <!--<span style="padding-left: 150px">创建时间</span>-->
    <!--<span style="padding-left: 100px">状态</span>-->
    <!--<span style="padding-left: 100px">数据集条数</span>-->
    <!--</div>-->
    <!--<el-row>-->
    <!--<el-col :span="20" v-for="(card, index) in cards" :key="index" :offset="2" style="padding-bottom: 15px">-->
    <!--<el-card>-->
    <!--<span>{{card.datasetname}}</span>-->
    <!--<span style="padding-left: 30px">{{card.createtime}}</span>-->
    <!--<span style="padding-left: 50px">{{card.status}}</span>-->
    <!--<span style="padding-left: 100px">{{card.successnumb}}</span>-->
    <!--<el-button style="float: right; padding: 3px 0" type="text"-->
    <!--:disabled="card.status!=='Finish'? true:false">查看日志-->
    <!--</el-button>-->
    <!--&lt;!&ndash;<el-button style="float: right; padding: 3px 0" type="text">地图查看</el-button>&ndash;&gt;-->
    <!--</el-card>-->
    <!--</el-col>-->
    <!--</el-row>-->
    <!--</div>-->
    <el-container class="mycontainer">
        <el-main style="height: 100%;width: 80%;margin: 3% 12% 0;overflow: hidden" :class="fitContent">
            <el-table
                    :data="cards"
                    style="overflow: auto">
                <el-table-column
                        prop="datasetname"
                        label="数据集名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="createtime"
                        label="数据集创建时间"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="successnumb"
                        :formatter="totalNum"
                        label="数据集大小（条）"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="successnumb"
                        label="成功录入条数"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="errornumb"
                        label="录入失败条数"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <el-button title="查看日志" icon="fa fa-eye" @click="log(scope.row)" type="text"
                                   size="small"></el-button>
                        <el-button title="下载日志" icon="el-icon-download" @click="logDownload(scope.row)" type="text"
                                   size="small"></el-button>
                        <el-button title="删除任务" icon="el-icon-delete" @click="taskDelete(scope.row)" type="text"
                                   size="small"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="text-align: center">
            <el-pagination
                    :page-size="pageSize"
                    :total="personalDataCount"
                    :current-page="personalDataCurrentPage"
                    layout="prev, pager, next"
                    background
                    @current-change="personalPageChange"
                    :page-sizes="[8, 16, 24, 32]"
                    style="margin-top: 10px;">
            </el-pagination>
        </el-footer>
        <personal-data-log-dialog :dataPost="datapost"></personal-data-log-dialog>
    </el-container>
</template>
<script>
    import personalDataLogDialog from "./personalDataLogDialog.vue"

    export default {
        name: "personalData1",
        components: {
            personalDataLogDialog
        },
        data() {
            return {
                cards: [],
                personalDataCount: 1,
                personalDataCurrentPage: 1,
                pageSize: 8,
                datapost: {}
            };
        },
        computed: {
            fitContent() {
                if (window.screen.height >= 1000) {
                    return 'longWindow'
                } else {
                    return 'shortWindow'
                }
            }
        },
        methods: {
            totalNum(row) {
                return parseInt(row.successnumb) + parseInt(row.errornumb);
            },
            getDataSet() {
                let that = this;
                // let url = "http://localhost:9000/dbfg/personalDataset/get";
                this.$axios.get(this.$URL.datasetMoniterListUrl + that.pageSize + "&pageNo=" + that.personalDataCurrentPage)
                    .then(function (res) {
                        if (res.code === 200) {
                            that.cards = res.body.result;
                            that.personalDataCount = res.body.totalCount;
                            let rowline = 0;
                            for (let row of res.body.result) {
                                if (row.status !== "Finish") {
                                    let tag = rowline;
                                    let superviseTimer = setInterval(function () {
                                        // i++;
                                        // let url2 = "http://localhost:9000/dbfg/personalDataset/getlogById?id=" + row.id;
                                        that.$axios.get(that.$URL.datasetMonitergetUrl + row.id)
                                            .then(function (res) {
                                                if (res.code === 200) {
                                                    //刷新那一行的值
                                                    that.cards[tag].status = res.body.status;
                                                    that.cards[tag].successnumb = res.body.successnumb;
                                                    that.cards[tag].errornumb = res.body.errornumb;
                                                    if (res.body.status === "Finish") {
                                                        clearInterval(superviseTimer);
                                                    }
                                                } else {
                                                    that.$message({
                                                        message: '数据获取失败',
                                                        type: 'warning'
                                                    });
                                                }
                                            });
                                    }, 1000);
                                }
                                rowline++;
                            }
                        } else {
                            that.$message({
                                message: '数据获取失败',
                                type: 'warning'
                            });
                        }
                    });
            },
            log(row) {
                let that = this;
                let msg = '';
                this.$axios.get(that.$URL.datasetLogGetUrl + row.id)
                    .then(function (res) {
                        if (res.code == 200) {
                            if (res.body == "") {
                                msg = '数据已全部录入成功！';
                            } else {
                                msg = res.body.substring(0, 15000);
                            }
                            that.datapost = {
                                visible: true,
                                res: msg
                            }
                        } else {
                            that.$message({
                                message: res.message,
                                type: 'warning'
                            });
                        }
                    })
            },
            logDownload(row) {

                let url = this.$URL.datasetLogDownloadUrl + row.id + "&name=" + row.datasetname;
                let that=this;
                this.$axios.get(url).then(res => {
                    if (res.code === 200) {
                        window.open(this.$URL.datasetLogDownloadUrl + row.id + "&name=" + row.datasetname, 'blank');
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    that.$message.error('日志下载失败！')
                })

            },
            taskDelete(row) {
                let that = this;
                this.$confirm('是否删除该任务？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = this.$URL.datasetTaskDeleteUrl + row.id;
                    this.$axios.get(url).then(res => {
                        if (res.code === 200) {
                            that.cards = [];
                            that.getDataSet();
                        } else {
                            that.$message({
                                type: 'warning',
                                message: res.message
                            })
                        }
                    }).catch(function (error) {
                        console.log(error);
                        that.$message.error('删除任务失败！')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            personalPageChange(currentPage) {
                this.personalDataCurrentPage = currentPage;
                this.getDataSet();
            },

        },
        created() {
            this.getDataSet();

        }
    }
</script>

<style scoped>

    .mycontainer .el-table__row {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #000000;
        display: block;
        box-sizing: inherit;
        width: 1400px;
        margin-bottom: 15px
    }

    .mycontainer .el-table .cell {
        -webkit-box-sizing: border-box;
        /* box-sizing: inherit; */
        white-space: normal;
        word-break: break-all;
        line-height: 18px;
        width: 200px;
        text-align: center;
    }

    /*.el-table_1_column_1{*/
    /*width:5000px*/
    /*}*/
    .longWindow {
        min-height: 850px;
    }

    .shortWindow {
        min-height: 300px;
    }
</style>